<template>
  <div>
    <div style="overflow: hidden">
      <div key="item.id" style="float: left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>
            <a data="">个人中心>基本信息</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <br />
    <br />
    <el-descriptions :column="1" size="mini" border>
      <!-- <div style="width: 5%; height: 5px; border-radius: 50px"></div> -->
      <!-- <el-descriptions-item
        label="用户名"
        v-model="userForm.username"
        labelStyle="fontSize:20px"
        ><p class="message">
          {{ userForm.username }}
        </p></el-descriptions-item
      > -->

      <el-descriptions-item
        label="用户名"
        v-model="userForm.username"
        labelStyle="fontSize:18px;text-align: center;size:20px;color:black"
        class="message"
        ><p v-if="userForm.username == NULL" class="message_success">
          暂无数据，请修改个人信息
        </p>
        <!-- style="font-size: 22px" -->
        <p v-else class="message_error">
          {{ userForm.username }}
        </p></el-descriptions-item
      >

      <el-descriptions-item
        label="昵称"
        v-model="userForm.nickname"
        labelStyle="fontSize:18px;text-align: center;size:20px;color:black"
        class="message"
        ><p v-if="userForm.nickname == NULL" class="message_success">
          暂无数据，请修改个人信息
        </p>
        <p v-else-if="userForm.nickname == ''" class="message_success1">
          数据已被删除，请重新修改个人信息
        </p>
        <p v-else class="message_error">
          {{ userForm.nickname }}
        </p></el-descriptions-item
      >

      <el-descriptions-item
        label="性别"
        v-model="userForm.gender"
        labelStyle="fontSize:18px;text-align: center;size:20px;color:black"
        class="message"
        ><p v-if="userForm.gender == ''" class="message_success">
          暂无数据，请修改个人信息
        </p>
        <p v-else class="message_error">
          {{ userForm.gender }}
        </p></el-descriptions-item
      >
      <el-descriptions-item
        label="居住地"
        v-model="userForm.city"
        labelStyle="fontSize:18px;text-align: center;size:20px;color:black"
        class="message"
        ><p v-if="userForm.city == NULL" class="message_success">
          暂无数据，请修改个人信息
        </p>
        <p v-else-if="userForm.city == ''" class="message_success1">
          数据已被删除，请重新修改个人信息
        </p>
        <p v-else class="message_error">
          {{ userForm.city }}
        </p></el-descriptions-item
      >

      <el-descriptions-item
        label="邮箱号"
        v-model="userForm.email"
        labelStyle="fontSize:18px;text-align: center;size:20px;color:black"
        class="message_success"
      >
        <p v-if="userForm.email == NULL" class="message_success">
          暂无数据，请修改个人信息
        </p>
        <p v-else-if="userForm.email == ''" class="message_success1">
          数据已被删除，请重新修改个人信息
        </p>
        <p v-else class="message_error">
          {{ userForm.email }}
        </p></el-descriptions-item
      >

      <el-descriptions-item
        label="座右铭"
        v-model="userForm.motto"
        labelStyle="fontSize:18px;text-align: center;size:20px;color:black"
        class="message"
        ><p v-if="userForm.motto == NULL" class="message_success">
          暂无数据，请修改个人信息
        </p>
        <p v-else-if="userForm.motto == ''" class="message_success1">
          数据已被删除，请重新修改个人信息
        </p>
        <p v-else class="message_error">
          {{ userForm.motto }}
        </p></el-descriptions-item
      >
    </el-descriptions>
  </div>
</template>
 
<script>
export default {
  name: "ShowinfoList",
  data() {
    return {
      userForm: {
        username: window.sessionStorage.getItem("token"),
        email: "",
        motto: "",
        city: "",
        gender: "",
        nicknam: "",
      },
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      console.log(this.userForm.username);
      const { data: res } = await this.$http.get(
        "findUserInfo?username=" + this.userForm.username
      );
      // console.log(res);
      this.userForm = res.data;
    },
  },
};
</script>
 
<style scoped>
.message_success {
  width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  color: #ff0000;
}
.message_success1 {
  width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  color: #ff0000;
}
.message_error {
  width: 20em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  color: purple;
}
</style>